<template>
  <div class="app-container">
    <el-row :gutter="15">
      <el-form size="small" :inline="true">
        <el-col :span="6">
        <el-form-item label="创建日期">
          <el-date-picker
            v-model="dateRange"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        </el-col>
        <el-col :span="18">
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        </el-form-item>
        </el-col>
        <el-col :span="6">
        <el-form-item>
          <div>{{message}}</div>
        </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>

</template>

<script>
import {getRealModelByDate} from "@/api/system/real";

export default {
  name: "Role",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 弹出层标题
      title: "",
      // 日期范围
      dateRange: [],
      resultData: null,
      message: ""
    };
  },
  created() {
  },
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {
      let dateRange = this.dateRange;
      dateRange = Array.isArray(dateRange) ? dateRange : [];
      let startDate = dateRange[0];
      let endDate = dateRange[1];
      if (!startDate || !endDate) {
        this.$message.warning('请输入创建日期！')
        return
      }
      getRealModelByDate(startDate, endDate).then(response => {
        this.resultData = response.data
        this.message = response.data.message()
      });
    }
  }
};
</script>
